<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      layout:decorate="~{layout}">
<head>
    <title>运行程序</title>
</head>
<body>
<div layout:fragment="content" id="app">
    <div class="site-text">
        <h1 class="site-h1">系统</h1>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>运行程序</legend>
        </fieldset>
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">示例</div>
                    <div class="layui-card-body">
                        <div class="layui-form">
                            <div class="layui-form layui-form-pane">
                                <div class="layui-form-item">
                                    <button class="layui-btn" @click="example('hanoi')">汉诺塔</button>
                                    <button class="layui-btn" @click="example('lisp')">Lisp</button>
                                    <button class="layui-btn" @click="example('piperecv')">管道（接收端）</button>
                                    <button class="layui-btn" @click="example('pipesend')">管道（发送端）</button>
                                    <button class="layui-btn" @click="example('fork')">Fork</button>
                                    <button class="layui-btn" @click="example('mutex')">Mutex</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">编辑代码</div>
                    <div class="layui-card-body">
                        <form class="layui-form">
                            <div class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">输入</label>
                                    <div class="layui-input-block">
                                        <textarea v-model="code" name="code" required lay-verify="required"
                                                  placeholder="请输入代码" class="layui-textarea"
                                                  style="height: 200px"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="text-align: center">
                                    <button class="layui-btn" lay-submit lay-filter="run">运行代码</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置代码</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">运行结果</div>
                    <div class="layui-card-body">
                        <form class="layui-form">
                            <div class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">输出</label>
                                    <div class="layui-input-block">
                                        <textarea id="output" v-model="content" readonly class="layui-textarea"
                                                  style="height: 200px"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="text-align: center">
                                    <button class="layui-btn" lay-submit lay-filter="kill"
                                            v-bind:class="{ 'layui-btn-disabled': !running }">结束
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-primary">清空</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block layout:fragment="bottom_script_block">
    <script src="/webjars/datatables/media/js/jquery.js" charset="utf-8"></script>
</th:block>
<script layout:fragment="script">
var App = new Vue({
    el: '#app',
    data: {
        items: [],
        code: '',
        content: '',
        running: false,
        id: -1
    },
    mounted: function () {
        var vm = this;
        layui.use('form', function(){
            var form = layui.form;
            form.on('submit(run)', function(data) {
                vm.id = -1;
                vm.submit(data.field);
                return false;
            });
            form.on('submit(kill)', function(data) {
                if (!vm.running) return false;
                vm.kill(vm.id);
                return false;
            });
        });
    },
    methods: {
        submit: function (field) {
            var vm = this;
            vm.$http.post('/api/exec/', field).then(function (response) {
                var data = response.data;
                vm.content = '';
                if (data.code == 200) {
                    if (data.data.error) {
                        vm.content = data.data.msg;
                        /*layer.msg(data.data.msg, {
                            time: 5000,
                            btn: ['关闭']
                        });*/
                    } else {
                        vm.running = true;
                        vm.id = data.data.pid;
                        vm.content = '运行成功！PID：' + vm.id + '\n';
                        vm.update(vm.id);
                        /*layer.msg(data.data.pid, {
                            time: 5000,
                            btn: ['关闭']
                        });*/
                    }
                } else {
                    layer.msg('API调用失败', {
                        time: 5000,
                        btn: ['关闭']
                    });
                }
            }, function (response) {
                layer.msg('运行失败');
                console.error('cannot post code');
            });
        },
        example: function (name) {
            var vm = this;
            vm.$http.get('/api/fs', {"params": {"path": '$/example/' + name}}).then(function (response) {
                var data = response.data;
                vm.content = '';
                if (data.code == 200) {
                    vm.code = data.data;
                } else {
                    layer.msg('下载失败！错误代码：' + data.code, {
                        time: 5000,
                        btn: ['关闭']
                    });
                }
            }, function (response) {
                layer.msg('下载失败');
                console.error('cannot get example');
            });
        },
        update: function(id) {
            var vm = this;
            vm.$http.get('/api/exec_query', {"params": {"id": id}}).then(function (response) {
                var data = response.data;
                if (data.code == 200) {
                    var d = data.data;
                    if (d.error) {
                        vm.running = false;
                        vm.id = -1;
                        vm.content += "\n出现错误！原因：" + d.msg + '\n';
                    } else if (d.halt) {
                        vm.running = false;
                        vm.id = -1;
                        vm.content += d.data + "\n" + d.result;
                        setTimeout(function() {
                            $("#output").scrollTop($("#output")[0].scrollHeight);
                        }, 500);
                    } else {
                        vm.content += d.data;
                        $("#output").scrollTop($("#output")[0].scrollHeight);
                        setTimeout(function() {
                            vm.update(id);
                        }, 200);
                    }
                } else {
                    vm.running = false;
                    vm.id = -1;
                    vm.content += "\n状态查询失败！错误代码：" + data.code + '\n';
                }
            }, function (response) {
                vm.running = false;
                vm.id = -1;
                layer.msg('查询失败');
                console.error('cannot get process status');
            });
        },
        kill: function (id) {
            var vm = this;
            vm.$http.get('/api/exec_kill', {"params": {"id": id}}).then(function (response) {
                var data = response.data;
                if (data.code == 200) {
                    var d = data.data;
                    if (d.error) {
                        layer.msg('操作失败！原因：' + d.msg, {
                            time: 5000,
                            btn: ['关闭']
                        });
                    } else if (d.data == 0) {
                        layer.msg('操作成功');
                    } else {
                        layer.msg('操作失败！错误代码：' + d.data, {
                            time: 5000,
                            btn: ['关闭']
                        });
                    }
                } else {
                    layer.msg('操作失败！错误代码：' + data.code, {
                        time: 5000,
                        btn: ['关闭']
                    });
                }
            }, function (response) {
                layer.msg('操作失败');
                console.error('cannot kill process');
            });
        }
    }
})
</script>
</body>
</html>